<template>
  <div class="wrap-container">
    <div class="add_form">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="132px">
        <div class="manage_tit">
          <div class="line"></div>
          <p>会员个人信息</p>
        </div>
        <div class="form_box">
          <div class="form_item">
            <el-form-item label="会员头像" prop="couponName">
              <el-upload
                class="avatar-uploader"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="微信昵称" prop="type">
              <el-input clearable v-model="form.couponName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="姓名" prop="type">
              <el-input clearable v-model="form.couponName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="性别" prop="isSpecify">
              <el-radio-group v-model="form.sex">
                <el-radio :label="'0'">男</el-radio>
                <el-radio :label="'1'">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input clearable v-model="form.couponName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="渠道来源">
              <el-select
                filterable
                clearable
                v-model="form.motionType"
                placeholder="请选择"
                @change="changeMotionType"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号" prop="type">
              <el-input clearable v-model="form.couponName" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
        <div class="manage_tit">
          <div class="line"></div>
          <p>会员卡信息</p>
        </div>
        <div class="form_box">
          <div class="form_item">
            <el-form-item label="会员卡类型" prop="couponName">
              <el-radio-group v-model="form.sex">
                <el-radio :label="'0'">次卡</el-radio>
                <el-radio :label="'1'">期限卡</el-radio>
                <el-radio :label="'2'">充值卡</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="办理时间" prop="couponName">
              <el-date-picker
                v-model="form.dateTime"
                type="date"
                placeholder="请选择"
                value-format="yyyy/MM/dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="支持场馆" prop="couponName">
              <el-date-picker
                v-model="form.dateTime"
                type="date"
                placeholder="请选择"
                value-format="yyyy/MM/dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="充值金额">
              <el-input clearable v-model="form.couponName" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="handle_btn">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElForm, ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import env from '@/utils/env'

interface ChannelOption {
  id: number
  name: string
}

interface FormData {
  id?: string
  couponName?: string
  sex?: string
  motionType?: number
  dateTime?: string
  [key: string]: any
}

const router = useRouter()
const formRef = ref<InstanceType<typeof ElForm>>()

const actionUrl = env.VITE_APP_BASE_API + '/file/qiniu/upload/img'

const form = reactive<FormData>({})
const rules = reactive({})
const channelOptions = ref<ChannelOption[]>([
  { id: 1, name: '自主开发' },
  { id: 2, name: '小程序' },
  { id: 3, name: '转介绍' },
])
const imageUrl = ref<string>('')

// Methods
const handleAvatarSuccess = () => {}

const changeMotionType = () => {}

// 提交
const handleSubmit = debounce(
  () => {
    try {
      formRef.value?.validate(async (valid) => {
        if (valid) {
          // 这里应该调用实际的 API
          // if (form.id) {
          //   await updateCoupon(form);
          // } else {
          //   await addCoupon(form);
          // }
          ElMessage.success('操作成功')
          router.push({ path: '/coupon/index' })
        }
      })
    } catch (e) {
      ElMessage.error((e as Error)?.message || '请求失败，请稍后再试')
    }
  },
  1000,
  {
    leading: true,
    trailing: false,
  },
)

// 取消
const goBack = () => {
  router.go(-1)
}
</script>

<style lang="scss" scoped>
.add_form {
  background: #fff;
  padding: 20px 15px;
  height: 100%;
  overflow-y: auto;
  .manage_tit {
    margin-bottom: 24px;
    p {
      margin-left: 13px;
    }
  }
  .user_info {
    flex-wrap: wrap;
  }
  :deep(.el-form) {
    .form_box {
      display: flex;
      justify-content: center;
    }
    .el-form-item {
      margin-right: 46px;
    }
    .el-input,
    .el-select {
      width: 443px;
    }
    .el-form-item__label {
      color: #808080;
      font-weight: normal;
      padding-right: 62px;
    }
    .el-input__icon {
      height: 35px;
      line-height: 35px;
    }
  }
  .handle_site {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    .site_btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 18px;
        height: 18px;
      }
    }
  }

  .handle_btn {
    display: flex;
    margin-left: 684px;
    margin-top: 45px;
    .el-button {
      width: 70px;
      height: 35px;
      border-radius: 8px;
      color: #383838;
      &.el-button--primary {
        background: #2590fa;
        color: #fff;
      }
      & + .el-button {
        margin-left: 28px;
      }
    }
  }
}
</style>
